import React, { Component } from 'react';
import { Modal, Form, Input, Spin, Select, InputNumber, TreeSelect } from 'antd';

const FormItem = Form.Item;
const Option = Select.Option;

@Form.create()
export default class AdminEditForm extends Component {
  constructor(props) {
    super(props);
    const { record } = props;
    this.state = {
      formDatas: {
        id: '',
        parentId: '',
        text: '',
        menuType: '',
        url: '',
        sort: '',
        module: '',
        description: '',
        ...record,
      },
    };
  }

  /**
   * 返回表单数据到父组件
   */
  onOk = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onOk(values);
      }
    });
  };
  /**
   * 清除表单数据
   */
  handleFormClear = () => {
    const { form } = this.props;
    form.resetFields();
  };

  render() {
    const { modalType, loading = false, treeData, form, record,} = this.props;
    const { getFieldDecorator } = form;
    let { formDatas } = this.state;
    formDatas = { formDatas, ...record };
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    return (
      <Modal
        visible={this.props.visible}
        title={`${modalType !== 'edit' ? '新增' : '编辑'}资源`}
        okText="提交"
        cancelText="取消"
        onCancel={this.props.toggleVisible}
        onOk={this.onOk}
        afterClose={this.handleFormClear}
      >
        <Spin tip="数据加载中..." spinning={loading}>
          <Form>
            <div style={{ display: 'none' }}>
              {modalType === 'edit' && (
                <FormItem {...formItemLayout} label="id" hasFeedback>
                  {getFieldDecorator('id', {
                    initialValue: formDatas.id,
                    rules: [{ required: false, message: '请输入id！' }],
                  })(<InputNumber />)}
                </FormItem>
              )}
            </div>

            <FormItem {...formItemLayout} label="序号" hasFeedback>
              {getFieldDecorator('sort', {
                initialValue: formDatas.sort,
                rules: [{ required: true, message: '请输入序号！' }],
              })(<InputNumber />)}
            </FormItem>
            <FormItem {...formItemLayout} label="所属资源" hasFeedback>
              {getFieldDecorator('parentId', {
                rules: [{ required: true, message: '请输入所属资源id！' }],
                initialValue: modalType === 'edit' ? formDatas.parentId + '' : '0',
              })(<TreeSelect style={{ width: 180 }} treeData={Object.values(treeData)} />)}
            </FormItem>
            <FormItem {...formItemLayout} label="资源名" hasFeedback>
              {getFieldDecorator('text', {
                initialValue: formDatas.text,
                rules: [{ required: true, message: '请输入资源名！' }],
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="资源链接" hasFeedback>
              {getFieldDecorator('url', {
                initialValue: formDatas.url,
                rules: [{ required: true, message: '请输入资源链接！' }],
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="资源类型" hasFeedback>
              {getFieldDecorator('menuType', {
                initialValue: formDatas.menuType,
                rules: [{ required: true, message: '请输入资源类型！' }],
              })(
                <Select
                  style={{ width: 275 }}
                  optionFilterProp="children"
                  notFoundContent="无法找到"
                  searchPlaceholder="请输入资源类型"
                >
                  <Option value="list">列表</Option>
                  <Option value="element">元素</Option>
                  <Option value="page">菜单</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="资源描述" hasFeedback>
              {getFieldDecorator('description', {
                initialValue: formDatas.description,
                rules: [{ required: false, message: '请输入资源描述！' }],
              })(<Input />)}
            </FormItem>
          </Form>
        </Spin>
      </Modal>
    );
  }
}
